<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: aqua;
    }

    .nav {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
</head>

<body>



  <!-- <div class="box">class</div> -->
  <!-- <div id="boxid">id</div>
  <div>div</div>
  <strong>aaa</strong> -->

  <!-- <img src='../../../../images/webapi/第一单元/1.webp' alt=""> -->
  <input type="text" value="张三" placeholder="请输入姓名">
  <input type='checkbox' class="inp2">
  <button>按钮</button>
  <select name="姓名" id="1">
    <option value="name">张三</option>
    <option value="name2" selected>李四</option>
    <option value="name3">王五</option>
  </select>

  <div class="box" data-id="666" data-name="梦泪">我是div</div>

  <script>
    const divv = document.querySelector('.box')
    console.log(divv.dataset)

    const sel = document.querySelector('select option')
    sel.selected = true

    const btn = document.querySelector('button')
    // btn.disabled = true

    const inp = document.querySelector('input')
    inp.value = '李四'

    const inp2 = document.querySelector('.inp2')
    inp2.checked = true
    // inp.type = 'password'


    // const box = document.querySelector('.box')
    // // 2. 修改样式
    // // 2.1 追加类 add() 类名不加点，并且是字符串
    // // box.classList.add('active')
    // // 2.2 删除类  remove() 类名不加点，并且是字符串
    // // box.classList.remove('box')
    // // 2.3 切换类  toggle()  有还是没有啊， 有就删掉，没有就加上
    // box.classList.toggle('nav')
    // const pic = document.querySelector('img')
    // // console.dir(pic)
    // pic.src = "../../../../images/webapi/第一单元/image.png"
    // pic.title = '本人照片'




    // const obj = {
    //   name: '张三'
    // }

    // obj.name = '李四'
    // console.log(obj)



    // const div = document.getElementById('boxid')

    // div.innerText = '哈哈哈'
    // div.innerText = '<strong>aaa</strong>'
    // div.innerHTML = '<strong>张三</strong>'


    // const div = document.getElementsByTagName('div')
    // const div = document.getElementsByClassName('box')
    // console.log(div)

    // const name = '张三'
    // const song = '唱歌'
    // document.write(name + song)


    // const num = 1
    // num = num + 1
    // console.log(num)

    // const arr = [1, 2, 3]
    // arr.push(5)

    // arr = ['a', 'b', 'c']
    // console.log(arr)

    // const obj = {
    //   name: '张三',
    //   age: 18
    // }

    // obj.adda = '唱歌'
    // obj.age = 20
    // console.log(obj)

    // const obj = {}


    // const arr = []
    // // arr = [1, 2, 3]
    // arr[0] = 1
    // console.log(arr)



  </script>
</body>

</html>